<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_y5eks0',
'img_Pwk0$1',
'ZY_GongSiGaiKuang_2',
'img_QSQ9w3',
'ZY_WeiKeHuTiGongWan_4',
'ZY_ZhangShaShiXiongJiuJiu_5',
'img_sOADR6',
'img_$PZ1y7',
'img_Q45se8',
'img_htXYi9',
'ZY_ChaKanGengDuo_10',
'ZY_ChanPinZhanShi_11',
'ZY_ChaKanGengDuo_12',
'img_CF2xS13',
'ZY_MiDieXiangTiQuWu_14',
'ZY_ShuWeiCao_15',
'ZY_ChaKanXiangQing_16',
'img_qnRnN17',
'ZY_MiDieXiangTiQuWu_18',
'ZY_ShuWeiCao_19',
'ZY_ChaKanXiangQing_20',
'img_GpMjW21',
'ZY_MiDieXiangTiQuWu_22',
'ZY_ShuWeiCao_23',
'ZY_ChaKanXiangQing_24',
'ZY_ZhiLiangGuanLi_25',
'ZY_ChaKanGengDuo_26',
'img_iGcCg27',
'img_OsnIT28',
'img_jSjtw29',
'img_g5lzy30',
'ZY_ZhiLiYuZhiLiangKong_31',
'ZY_GongSiXinWen_32',
'ZY_ChaKanGengDuo_33',
'img_FkM5K34',
'ZY_HuNanWanTaiShengWu_35',
'ZY_ZhangShaShiXiongJiuJiu_36',
'ZY_37_37',
'img_NHxkc38',
'ZY_HuNanWanTaiShengWu_39',
'ZY_ZhangShaShiXiongJiuJiu_40',
'ZY_41_41'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1,"> 
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/swiper.min.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/animate.css">
  <link rel="stylesheet" href="http://gwfile.csxuncong.com/wantaien/mobile/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  <style>
   .box{
    padding: 30px 0;
    box-sizing: border-box;
   }
   .more{
    display: block;
    color: #23A04D;
    text-align: center;
    font-size: 12px;
   }
   .about-us{
    text-align: center;
   }
   .about-us .article{
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    margin-bottom: 30px;
    text-align: left;
   }
   .product{
    text-align: center;
    background: url('http://gwfile.csxuncong.com/wantaien/mobile/images/home/product-bg.png') no-repeat;
   }

   .product .product-wrap{
    margin-bottom: 30px;

   }
   .product .product-item{
    background: #ffffff;
    padding: 20px 10px;
    box-sizing: border-box;
    margin-right: 12px;
    box-shadow: 0px 0px 60px rgba(35, 160, 77, 0.1);
   }
   .product .product-item>a{
    display: block;
    width: 100%;
   }
   .product .product-item:nth-last-child(1){
    margin-right: 0;
   }
   .product img{
    width: 100%;
    margin: 0 auto;
   }
   .product .name{
    margin: 15px 0 10px;
    font-size: 14px;
    text-align: center;
    color: #000000;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
   }
   .product .desc{
    color: #000000;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
   }
   .quality{
    text-align: center;
    background: url('http://gwfile.csxuncong.com/wantaien/mobile/images/home/bg.png') no-repeat;
   }
   .quality .title,
   .quality .look-more{
    color: #ffffff
   }
   .quality .look-more{
    border-color: #ffffff;
   }
   .quality-wrap{
    position: relative;
    margin-bottom: 30px;
   }
   .quality .swiper-slide img{
    width: 100%;
   }
   .quality-txt{
    background: #23A04D;
    color: #ffffff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
   }
   .news{
    text-align: center;
   }
   .news .look-more{
    color: #23A04D;
    border-color: #23A04D;
   }
   .news .news-list{
    margin-bottom: 30px;
   }
   .news .item{
    box-sizing: border-box;
    box-shadow: 0 0 30px rgba(35, 160, 77, 0.1);
    margin-bottom: 15px;
   }
   .news .item img{
    width: 100px;
    height: 100px;
    display: block;
   }
   .news .item .con{
    text-align: left;
    background: #F7F7F7;
    padding: 10px 10px 10px 20px;
   }
   .news .item .con .name{
    color: #000000;
    font-size: 16px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
   }
   .news .item .con .desc{
    margin-top: 6px;
    font-size: 14px;
    color: rgb(11 12 12 / 60%);
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
    text-align: justify;
   }
   .news .item .con .time{
    font-size: 12px;
    margin-top: 6px;
    color: rgb(11 12 12 / 60%);
   }
   .service-support{
    text-align: center;
    background: url('http://gwfile.csxuncong.com/wantaien/mobile/images/home/bg.png') no-repeat;
    background-size: cover;
   }
   .service-support .title,
   .service-support .look-more{
    color: #ffffff
   }
   .service-support .look-more{
    border-color: #ffffff;
   }
   .service-support .list{
    margin: 8px -8px;
   }
   .service-support .list .item{
    width: 25%;
    padding: 8px 8px;
    text-align: center;
    box-sizing: border-box;
   }
   .service-support .list .item .icon{
    display: block;
    margin: 0 auto;
    width: 50px;
   }
   .service-support .list .item .name{
    color: #ffffff;
    font-size: 14px;
    margin: 15px 0 20px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
   }
  </style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
  <jsp:include page="_top.jsp"></jsp:include> 
  <div class="banner"> 
   <div class="swiper-container"> 
    <div class="swiper-wrapper">
     <cms:ad var="banner" code="mobile_banner"></cms:ad>
     <c:forEach items="${banner }" var="item">
      <div class="swiper-slide">
       <img src="${item.adImg}" class="img zy" data-type="ad" data-id="${item.adId}">
      </div>
     </c:forEach>
    </div>
   </div> 
  </div> 
  <div class="about-us box"> 
   <div class="container"> 
    <div class="title-wrap">
     <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_GongSiGaiKuang_2.adId}">${ZY_GongSiGaiKuang_2.adTitle}</h3> 
    </div>
    <p class="article" data-type="ad" data-id="${ZY_ZhangShaShiXiongJiuJiu_5.adId}">
     ${ZY_ZhangShaShiXiongJiuJiu_5.adTitle}
    </p>
    <a class="more zy" href="${path }/do/redirect/mobile/aboutUS" data-type="ad" data-id="${ZY_ChaKanGengDuo_10.adId}">${ZY_ChaKanGengDuo_10.adTitle}</a>
   </div>
  </div> 
  <div class="box product"> 
   <div class="container"> 
    <div class="title-wrap">
     <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_ChanPinZhanShi_11.adId}">${ZY_ChanPinZhanShi_11.adTitle}</h3> 
    </div>
    <div class="product-wrap flex space-between">
     <cms:arts var="artList" code="zwtqw" pageSize="3"></cms:arts>
     <c:forEach items="${artList }" var="item" >
      <div class="flex flex-1 align-center space-center product-item">
       <a href="${path }/do/redirect/mobile/productDetail?id=${item.artId}">
        <img src="${item.artImage}" class="img zy">
        <p class="name zy">${item.artTitle}</p>
        <p class="desc zy">${item.artLables}</p>
       </a>
      </div>
     </c:forEach>
    </div>
    <a class="look-more zy" href="${path }/do/redirect/mobile/product" data-type="ad" data-id="${ZY_ChaKanGengDuo_12.adId}">${ZY_ChaKanGengDuo_12.adTitle}</a>
   </div> 
  </div> 
<%--  <div class="quality box"> --%>
<%--   <div class="container"> --%>
<%--    <div class="title-wrap">--%>
<%--     <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_ZhiLiangGuanLi_25.adId}">${ZY_ZhiLiangGuanLi_25.adTitle}</h3>--%>
<%--    </div>--%>
<%--    <div class="quality-wrap"> --%>
<%--     <div class="swiper-container"> --%>
<%--      <div class="swiper-wrapper">--%>
<%--       <cms:ad var="images" code="quality_images"></cms:ad>--%>
<%--       <c:forEach items="${images }" var="item">--%>
<%--        <div class="swiper-slide">--%>
<%--         <img src="${item.adImg}" class="img zy" data-type="ad" data-id="${item.adId}" />--%>
<%--        </div>--%>
<%--       </c:forEach>--%>
<%--      </div>--%>
<%--     </div>--%>
<%--    </div>--%>
<%--    <a class="look-more zy" href="${path }/do/redirect/mobile/quality" data-type="ad" data-id="${ZY_ChaKanGengDuo_26.adId}">${ZY_ChaKanGengDuo_26.adTitle}</a>--%>
<%--   </div> --%>
<%--  </div> --%>
  <div class="service-support box">
   <div class="container">
    <div class="title-wrap">
     <h3 class="title animate__animated animate__fadeInUp">Service support</h3>
    </div>
    <div class="list flex flex-wrap animate__animated animate__fadeInUp">
     <div class="item">
      <div class="con flex flex-column space-center">
       <img src="http://gwfile.csxuncong.com/wantaien/mobile/images/home/icon5.png" class="icon">
       <p class="name">CUSTOMER INFOMATION PROCESSING</p>
      </div>
     </div>
     <div class="item">
      <div class="con flex flex-column space-center">
       <img src="http://gwfile.csxuncong.com/wantaien/mobile/images/home/icon6.png" class="icon">
       <p class="name">THE ORDER PRODUCTION</p>
      </div>
     </div>
     <div class="item">
      <div class="con flex flex-column space-center">
       <img src="http://gwfile.csxuncong.com/wantaien/mobile/images/home/icon7.png" class="icon">
       <p class="name">ORDER TRACKING</p>
      </div>
     </div>
     <div class="item">
      <div class="con flex flex-column space-center">
       <img src="http://gwfile.csxuncong.com/wantaien/mobile/images/home/icon8.png" class="icon">
       <p class="name">INSPECTION</p>
      </div>
     </div>
    </div>
    <a class="look-more" href="${path }/do/redirect/mobile/serviceSupport">MORE+&nbsp;&nbsp;&gt;&gt;</a>
   </div>
  </div>
  <p class="quality-txt zy" data-type="ad" data-id="${ZY_ZhiLiYuZhiLiangKong_31.adId}">${ZY_ZhiLiYuZhiLiangKong_31.adTitle}</p> 
  <div class="box news"> 
   <div class="container"> 
    <div class="title-wrap">
     <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_GongSiXinWen_32.adId}">${ZY_GongSiXinWen_32.adTitle}</h3> 
    </div>
    <div class="news-list">
     <cms:arts var="artList" code="gsxw1" pageNow="0" pageSize="3"></cms:arts>
     <c:forEach items="${artList }" var="item" >
      <div class="item animate__animated animate__fadeInLeft">
       <a class="flex" href="${path }/do/redirect/mobile/newsDetail?id=${item.artId}">
        <img src="${item.artImage}" class="zy">
        <div class="con flex-1">
         <h4 class="name zy">${item.artTitle}</h4>
         <p class="desc zy">${item.artAbstract}</p>
         <h4 class="time zy"><fmt:formatDate pattern="yyyy-MM-dd" value="${item.artCreatetiem}" ></fmt:formatDate></h4>
        </div> </a>
      </div>
     </c:forEach>
    </div>
    <a class="look-more zy" href="${path }/do/redirect/mobile/news" data-type="ad" data-id="${ZY_ChaKanGengDuo_33.adId}">${ZY_ChaKanGengDuo_33.adTitle}</a>
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>
  <script src="http://gwfile.csxuncong.com/wantaien/mobile/js/swiper.min.js"></script>
  <script>
    window.onload = function(){
     var swiper = new Swiper('.banner .swiper-container', {
      speed:1000,
      loop:true,
      slidesPerView: 1
     });
     // var swiper = new Swiper('.quality .swiper-container', {
     //  speed:1000,
     //  loop:true,
     //  spaceBetween: 15,
     //  slidesPerView: 3
     // });
     var menuIcon = document.getElementById('menuIcon');
     var headerNav = document.getElementById('headerNav');
     var closeNav = document.getElementById('closeNav');
     menuIcon.addEventListener('click', function () {
      headerNav.style.display = "block";
     }, false)
     closeNav.addEventListener('click', function () {
      headerNav.style.display = "none";
     }, false)
    }
  </script>
 </body>
</html>